<template>
    <div class="car">
        <van-nav-bar fixed title="购物车" :right-text="state.status ? '编辑' : '完成'" left-arrow @click-left="back()"
            @click-right="onClickRight" />
        <page class="car" :bottom="100">

            <van-checkbox-group v-if="carStore.carArr.length != 0" v-model="state.youSelectItem" ref="checkboxGroup"
                @change="youSelect">
                <van-checkbox :name="item.car_id" v-for="item, index in carStore.carArr" :key="index">
                    <van-card :num="item.car_num" :price="item.wares_oldprice" :title="item.wares_title"
                        :thumb="item.wares_masterimg && item.wares_masterimg[0]">
                        <template #footer>
                            <div @click.stop="">
                                <van-stepper :name="item.car_id" @change="upCarNum" v-model="item.car_num" />
                            </div>
                        </template>
                        <template #desc>
                            <van-text-ellipsis :content="item.wares_info" />
                        </template>
                    </van-card>
                </van-checkbox>
            </van-checkbox-group>

            <div v-else>暂无数据</div>


        </page>

        <van-submit-bar :price="totalMoney">
            <van-checkbox @click="SelectList" v-model="state.select">全选</van-checkbox>
            <template #button>
                <van-button v-if="state.status" round type="warning" @click="buyCar">买买买</van-button>
                <van-button v-else round type="danger" @click="deleteCar">删 除</van-button>
            </template>
        </van-submit-bar>
    </div>
</template>
  
<script setup lang="ts">
import { onMounted, reactive, ref, computed, onUnmounted, getCurrentInstance } from "vue";
import { useCarStore } from "@/state/car";
import { useRouterAction } from "@/utils/router";
import { deleteCar as deleteCarItem, updateCarNum, submitCar } from "@/serve/_";

const carStore = useCarStore()
const { back, push } = useRouterAction()
const checkboxGroup = ref();

const state: {
    select: boolean,
    status: boolean,
    youSelectItem: number[]
} = reactive({
    select: false,
    status: true, // true 显示编辑  false  显示完成
    youSelectItem: []
})

onMounted(async () => {
    if (carStore.carArr.length == 0) {
        await carStore.PostCarList()
    }
})

let totalMoney = computed(() => {
    let money = 0
    carStore.carArr.forEach(v => {
        state.youSelectItem.forEach(j => {
            if (v.car_id == j) {
                money += Number(v.wares_oldprice && v.wares_oldprice) * v.car_num
            }
        })
    })
    return money * 100
})

let youSelect = () => {
    if (state.youSelectItem.length != carStore.carArr.length) {
        state.select = false
    }
}

let buyCar = async () => {
    let params: Object[] = []
    // {"waresid":113,"goodsnum":2,"goodsprice":1000}
    carStore.carArr.forEach(v => {
        state.youSelectItem.forEach(j => {
            if (v.car_id == j) {
                params.push({
                    waresid: v.wares_id,
                    goodsnum: v.car_num,
                    goodsprice: v.wares_oldprice
                })
            }
        })
    })

    await submitCar({
        carList: JSON.stringify(params)
    })

    push({ name: "order" });
}

let upCarNum = async (value: string, detail: { name: string }) => {
    await updateCarNum({
        carid: detail.name,
        quantity: value
    })
}

let SelectList = () => {
    if (state.select) {
        checkboxGroup.value.toggleAll(true)
    } else {
        checkboxGroup.value.toggleAll()
    }

}

let deleteCar = async () => {
    await deleteCarItem({
        carid: JSON.stringify(state.youSelectItem)
    })

    setTimeout(async () => {
        await carStore.PostCarList()
    }, 1000)
}

let onClickRight = () => {
    state.status = !state.status
}
let onClickLeft = () => { }

</script>
  
<style lang="less" scoped>
@import "@page/Car.less";
</style>